<template>
  <div>
    <el-card style="width: 50%;margin: 20px auto;position: relative;">
      <el-button type="primary" plain size="mini" style="position: absolute;top: 10px;right:10px;"
        @click="czmm">重置密码</el-button>
      <el-form :model="user" label-width="100px" style="padding-right: 50px">
        <div style="margin: 15px; text-align: center">

          <el-upload action="/oss" :headers="{ Authorization: 'Bearer ' + token }" :on-success="handleAvatarSuccess">

            <img v-if="user.icon" :src="this.user.icon" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </div>
        <el-form-item label="账号" prop="username">
          <el-input v-model="user.username" disabled placeholder="账号"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-select v-model="user.sex" placeholder="性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="学士" prop="scholar">
          <el-input v-model="user.scholar" placeholder="学士"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="user.address" placeholder="地址"></el-input>
        </el-form-item>
        <el-form-item label="研究方向" prop="researchDirection">
          <el-input v-model="user.researchDirection" placeholder="研究方向	"></el-input>
        </el-form-item>

        <el-form-item label="职称" prop="technicalTitle	">
          <el-input v-model="user.technicalTitle" placeholder="职称"></el-input>
        </el-form-item>
        <el-form-item label="所属系" prop="belongingField">
          <el-input v-model="user.belongingField" placeholder="所属系	"></el-input>
        </el-form-item>
        <el-form-item label="个人简介" prop="personalProfile">
          <div id="editor"></div>
        </el-form-item>

        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="update">保 存</el-button>
        </div>
      </el-form>
    </el-card>
    <el-dialog title="修改密码" :visible.sync="fromVisible1" width="40%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="form1" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">


        <el-form-item label="原密码" required>
          <el-input v-model="form1.oldpassword" placeholder="原密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" required>
          <el-input v-model="form1.newpassword" show-password placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input v-model="form1.qrpasword" placeholder="确认密码" show-password></el-input>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="save1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import E from 'wangeditor';
import service from '@/request';
export default {
  name: "AdminPerson",
  data() {
    return {
      user: {},
      form: {},
      fromVisible1: false,
      form1: {},
      editor: null
    }
  },
  created() {

  },
  mounted() {
    this.token = window.localStorage.getItem("token")
    this.user = JSON.parse(window.localStorage.getItem("userinfo"))
    this.initWangEditor("")
  },
  methods: {
    async save1() {
      if (this.form1.newpassword == '' || !this.form1.newpassword) {
        return this.$message.warning("请输入新密码")

      }
      if (this.form1.qrpasword == '' || !this.form1.qrpasword) {
        return this.$message.warning("请输入确认密码")

      }
      if (this.form1.newpassword !== this.form1.qrpasword) {
        return this.$message.warning("两次输入密码不一致")
      }

      this.form1.password = this.form1.newpassword;
      this.form1.roleIds = [2]
      delete this.form1.oldpassword
      delete this.form1.newpassword
      delete this.form1.qrpasword;
      const res = await service.put("/sys/user", this.form1)
      if (res.code == 200) {
        this.fromVisible1 = false
        this.$message({
          type: 'success',
          message: '操作成功',
          duration: 1000
        });

      }
    }, czmm() {
      this.form1 = this.user;
      this.fromVisible1 = true
    },
    initWangEditor(content) { //用户输入的文本作为参数传进函数。
      this.$nextTick(() => { //1.dom元素加载好后，先判断editor是否已经完成初始化，如果已经完成初始化，那么把editor销毁，清空。
        if (this.editor) {
          this.editor.destroy();
          this.editor = null;
        }
        this.editor = new E('#editor') //2.新建一个editor，赋值给我们一开始定义的editor，并渲染在iD为#editor的元素里
        this.editor.config.placeholder = '请输入内容' // 配置编辑器默认展示的文本
        this.editor.config.uploadFileName = 'file' //配置编辑器文件上传的名称
        this.editor.config.uploadImgServer = '/oss/editor'  //配置编辑器文件上传的接口
        this.editor.create() //执行创建编辑器
        console.log("12345")
        setTimeout(() => { //延时函数，这里没有设置延时时间，即为实时获取编辑器的文本给到this.editor.txt.html()。
          this.editor.txt.html(content)
        })

      })
    },
    handleAvatarSuccess(response, file, fileList) {
      this.user.icon = response.data
    },
    async update() {
      this.user.roleIds = [2]
      this.user.personalProfile = this.editor.txt.html()
      const res = await service.put("/sys/user", this.user);
      console.log(res);
      if (res.code == 200) {
        this.$message.success("成功")
        window.localStorage.setItem("userinfo", JSON.stringify(this.user))
      }
    },
    handleAvatarSuccess1(response, file, fileList) {
      // 把user的头像属性换成上传的图片的链接
      this.$set(this.user, 'license', response.data)
    },
  }
}
</script>

<style scoped>
/deep/.el-form-item__label {
  font-weight: bold;
}

/deep/.el-upload {
  border-radius: 50%;
}

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

/deep/.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px !important;
  text-align: center;
  border-radius: 50%;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
</style>